<template>
	<view
		:style="{
			width: contentWidth,
			'border-radius': circle ? '22px' : '8px'
		}"
		class="self-input"
	>
		<view
			v-if="searchResult.length>0"
			class="mask"
			@click="searchResult=[]"
		/>
		<view
			:style="{
				color: labelColor
			}"
			class="label"
		>
			{{label}}
		</view>
		<view class="main">
			<!-- 输入内容 -->
			<input
				:style="{
					'border-radius': circle ? '22px' : '8px',
				}"
				:type="type"
				:disabled="disabled"
				:value="value"
				:placeholder="placeholder"
				@input="inputting"
				@focus="inputting"
				@change="$emit('change')"
			>
			<!-- 搜索结果 -->
			<view class="search-result">
				<view
					class="result"
					v-for="(result, index) in searchResult"
					:key="index"
					@click="checkResult(result)"
				>
					{{ result }}
				</view>
			</view>
			<!-- 备注信息 -->
			<view class="remark">{{ remark }}</view>
		</view>
	</view>
</template>

<script>
export default {
  props: {
    /* 标签颜色 */
    labelColor: {
      type: String,
      default: '#ffffff'
    },
    /* 输入框宽度 */
    contentWidth: {
      type: String,
      default: '100%'
    },
    circle: {
      type: Boolean,
      default: false
    },
    /* 输入框提示内容 */
    placeholder: {
      type: String,
      default: ''
    },
    /* 备注信息 */
    remark: {
      type: String,
      default: ''
    },
    /* 绑定值 */
    value: String || Number,
    /* 文本类型 */
    type: {
      type: String,
      default: 'text'
    },
    /* 标签 */
    label: {
      type: String,
      default: ''
    },
    /* 是否禁止 */
    disabled: {
      type: Boolean,
      default: false
    },
    /* 是否可搜索 */
    search: {
      type: Boolean,
      default: false
    },
    /* 搜索框内容 */
    searchList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      searchResult: []
    }
  },
  methods: {
    hideSearch() {
      this.searchResult = []
    },
    /**
     * 输入内容，计算搜索结果
     */
    inputting(e = this.value) {
      const value = e.target.value

      /* 搜索模式，触发搜索结果 */
      if (this.searchList.length > 0) {
        /* 正则匹配包含字段的内容 */
        const filReg = new RegExp(value, 'gi')
        /* 过滤筛选 */

        this.searchResult = this.searchList.filter(item => filReg.test(item))
        /* 如果只有1条匹配，且匹配结果与输入内容完全相同则不显示筛选 */
        if (this.searchResult.length === 1 && this.searchResult[ 0 ] === value) {
          this.searchResult = []
        }
      }
      this.$emit('input', value)
    },
    /**
     * 点击搜索结果
     * @param {String} 搜索结果
     */
    checkResult(result) {
      this.$emit('input', result)
      this.searchResult = []
    },
  }
}
</script>

<style lang="scss" scoped>
.self-input {
  position: relative;
  display: flex;
  align-items: center;
  padding: 1px;
  margin: 10px 0;
  background-color: $primary2;

  /* 蒙层 */
  .mask {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9999;
    background-color: transparent;
  }

  .label {
    margin: 0 10px;
    font-size: 22rpx;
    white-space: nowrap;
  }

  .main {
    position: relative;
    display: flex;
    flex: 1;
    align-items: center;

    input {
      flex: 1;
      padding: 0 5px;
      font-size: 24rpx;
      background-color: #ffffff;
      border: 1px solid $primary4;
    }

    .search-result {
      position: absolute;
      top: 55rpx;
      z-index: 10000;
      width: 100%;
      max-height: 400rpx;
      overflow-x: hidden;
      overflow-y: auto;
      background-color: #ffffff;
      border-radius: 8px;
      box-shadow: 0 0 5px $primary2;

      .result {
        padding: 7px 3px;
        font-size: 22rpx;
        text-align: center;
        // white-space nowrap

        &.active {
          background-color: rgba(144, 140, 139, 0.5);
        }
      }
    }

    .remark {
      position: absolute;
      top: 26px;
      left: 2px;
      font-size: 20rpx;
      color: $primary2;
    }
  }
}
</style>
